<template>
  <div class="no-permission-page">
    <div class="content">
      <div class="icon">
        <LockOutlined />
      </div>
      <h1>403</h1>
      <h2>抱歉，您没有访问权限</h2>
      <p>您没有权限访问此页面，请联系管理员获取相应权限。</p>
      <div class="actions">
        <a-button type="primary" @click="goBack">
          <ArrowLeftOutlined />
          返回上一页
        </a-button>
        <a-button @click="goHome">
          <HomeOutlined />
          返回首页
        </a-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ArrowLeftOutlined, HomeOutlined, LockOutlined } from '@ant-design/icons-vue'

const router = useRouter()

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 返回首页
const goHome = () => {
  router.push('/')
}
</script>

<style scoped>
.no-permission-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 180px);
  background: #f0f2f5;
  padding: 24px;
}

.content {
  text-align: center;
  background: white;
  padding: 48px;
  border-radius: 8px;
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.03),
    0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
  max-width: 500px;
  width: 100%;
}

.icon {
  font-size: 64px;
  color: #ff4d4f;
  margin-bottom: 24px;
}

h1 {
  font-size: 72px;
  margin: 0;
  color: #ff4d4f;
  line-height: 1;
}

h2 {
  font-size: 24px;
  margin: 16px 0;
  color: #1a1a1a;
}

p {
  color: #8c8c8c;
  margin-bottom: 32px;
  line-height: 1.6;
}

.actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

:deep(.ant-btn) {
  min-width: 120px;
  height: 40px;
  font-size: 16px;
}

:deep(.ant-btn-primary) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-btn-primary:hover) {
  background: #40a9ff;
  border-color: #40a9ff;
}

:deep(.ant-btn-default) {
  border-color: #d9d9d9;
  color: #1a1a1a;
}

:deep(.ant-btn-default:hover) {
  border-color: #40a9ff;
  color: #40a9ff;
}

@media (max-width: 576px) {
  .content {
    padding: 32px 24px;
  }

  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 20px;
  }

  .actions {
    flex-direction: column;
  }

  :deep(.ant-btn) {
    width: 100%;
  }
}
</style>
